<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>圈子/动态-主页面</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        header {
            height: auto;
        }

        .van-hairline--top-bottom::after,
        .van-hairline-unset--top-bottom::after {
            border: 0;
        }

        .van-tab {
            /* padding: .03rem 0.08rem; */
            padding: 0 0.08rem;
            font-size: .16rem;
        }

        .release {
            width: 90px;
            display: flex;
            justify-content: flex-end;
        }



        .van-tabs__line {
            height: 0.02rem !important;
            width: 40px !important;
            /* width: 18% !important; */
        }

        .van-tabs {
            height: 100%;
        }

        .van-tabs--line .van-tabs__wrap {
            height: 100%;
        }

        .van-tabs__nav--line {
            padding-bottom: 0;
        }

        .van-tabs__line {
            /* padding-top: 2px; */
            /* bottom: 2px; */
        }

        .van-tabs__nav--line {
            padding-bottom: 4px;
        }

        .flex-x-sb {
            margin-top: 4px;
            height: 44px;
        }

        .van-tab__text--ellipsis {
            line-height: 1.6;
            padding: 0;
        }

        .van-tab--active .van-tab__text {
            font-weight: 700;
        }

        
        .circle-home-title{
            border-bottom: 1px solid #EEEEEE;
            margin-top: 4px;
            height: .48rem;
        }
        .circle-home-title  .van-tab{
            font-size: .24rem !important;
        } 

       /* .circle-home-title  .van-tab--active{
            font-size: .24rem; 
        }  */

        .release {
            width: 90px;
            display: flex;
            justify-content: flex-end;
        }

        .circle-home-title .van-tabs {
            width: 36%;
            height: 100%;
        }

        .circle-search {
            width: 90px;
            height: 0.3rem;
            background-color: #FAFAFA;
            border-radius: 0.15rem;
            display: flex;
            color: #999999;
            justify-content: start;
            align-items: center;
            margin-left: .12rem;
        }

        .circle-search .iconfont {
            margin-left: 0.095rem;
            margin-right: 0.104rem;
        }

        .circle.text-placeholder {
            color: #c1c1c1;
            font-size: 0.12rem;
        }

        .my_release_container {
            width: 90px;
            display: flex;
            align-items: center;
            padding-right: 16px;
            justify-content: flex-end;
        }

        .my_release_ico {
            height: .24rem;
            width: .24rem;
            margin-left: .27rem;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <header>

            <div class="flex-x-sb">
                <div class="circle-search" @click="goSearch()">
                    <!-- <span class="iconfont">&#xe71e;</span> -->
                    <img class="iconfont" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/circle_top_search_ico.png" width="15" height="15"
                        alt="">
                    <span class="text-placeholder">搜索</span>
                </div>
                <van-tabs v-model="active" color="#C7000B" title-active-color="#C7000B" title-inactive-color="#22242A"
                    line-height="2px" @click="setFrameGroupIndex">
                    <van-tab title="全部"></van-tab>
                    <van-tab title="关注"></van-tab>
                </van-tabs>

                <div class="my_release_container" @click="goPage">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/release.png" alt="" class="my_release_ico">
                </div>
            </div>

            <!-- <div class="flex-x-sb circle-home-title">
                <van-tabs v-model="active"  title-active-color="#333333" title-inactive-color="#999999"
                    line-height="0px" @click="setFrameGroupIndex">
                    <van-tab title="全部"></van-tab>
                    <van-tab title="关注"></van-tab>
                </van-tabs>
                <div class="my_release_container">
                    <img class="iconfont"  @click="goSearch()" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/circle_top_search_ico.png" width="22" height="21"
                    alt="">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/release.png" alt="" class="my_release_ico"  @click="goPage">
                </div>
            </div> -->
        </header>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script>
        apiready = function () {
            api.addEventListener({
                name: 'circle-toggle'
            }, function (ret, err) {
                vm.active = ret.value.active
            });
            vm = new Vue({
                el: '.app',
                data: {
                    active: 0,
                    headerH: 0,
                    currentRecommendIndex: 0,
                    frames: [{
                        name: 'circle_recommend_frm',
                        url: 'circle_recommend_frm.html',
                    }, {
                        name: 'circle_focus_frm',
                        url: 'circle_list_frm.html',
                        pageParam: {
                            screenType: 1
                        }
                    }],


                },
                created() {
                    api.sendEvent({
                        name: 'eventTab',
                        extra: { key: ' value' }
                    });
                },
                mounted() {
                    var vm = this;

                    var header = $api.dom('header');
                    this.headerH = fixStatusBar();
                    this.footerH = api.pageParam.footerH;
                    this.frames = [{
                        name: 'circle_recommend_frm',
                        url: 'circle_recommend_frm.html',
                        pageParam: {
                            footerH: vm.footerH,
                            headH: vm.headerH
                        }
                    }, {
                        name: 'circle_focus_frm',
                        url: 'circle_list_frm.html',
                        pageParam: {
                            screenType: 1
                        }
                    }]
                    this.openFrameGroup();
                    // var baidu = api.require('modulebaidumtj');
                    // baidu.onPageStart({
                    //     pageName: '发现'
                    // })
                },
                methods: {
                    goSearch() {
                        api.openWin({
                            name: 'circle_search_win',
                            url: 'circle_search_win.html',
                            bounces: false,
                        });
                    },
                    openFrameGroup() {
                        var vm = this;

                        api.openFrameGroup({
                            name: 'circle_group',
                            rect: {
                                marginTop: vm.headerH,
                                marginBottom: vm.footerH,
                                w: 'auto'
                            },
                            scrollEnabled: false,
                            frames: vm.frames,
                            preload: 0
                        }, function (ret, err) {
                            vm.active = ret.index;

                            api.sendEvent({
                                name: 'eventCircleChange',
                                extra: {
                                    value: ret.index,
                                    currentRecommendIndex: vm.currentRecommendIndex
                                }
                            });

                            api.setFrameGroupAttr({
                                name: 'circle_recommend_group',
                                hidden: ret.index == 1
                            });
                        });
                    },
                    setFrameGroupIndex() {
                        api.setFrameGroupIndex({
                            name: 'circle_group',
                            scroll: true,
                            index: this.active,
                            reload: false
                        });
                    },
                    goPage() {
                        if (!checkToken()) return false;
                        api.openWin({
                            name: 'circle_publish_win',
                            url: 'circle_publish_win.html',
                            bounces: false,
                            pageParam: {
                                title: '发话题'
                            }
                        });
                    }
                }
            })
        }
    </script>
</body>

</html>